<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hash路由</title>
</head>

<body>


  <div id="app">
    <h1>hash路由</h1>
    <button data-url="/center">个人主页</button>
    <button data-url="/music">音乐</button>
    <button data-url="/news">新闻</button>
    <div id="view"></div>
  </div>

</body>

<script>

  /*
  history路由原理:
    history.pushState方法改变浏览器的地址,不刷新页面
    pushState(state,title,url)有三个参数
      第一个state,可以在popstate事件触发(用户点击浏览器的前进、后退按钮时)时，它会以回调的方式，传入一些数据
      第二个title,绝大多数的浏览器不支持,书写null即可
      第三个url,是新的地址
*/
  //定义路由表
  const routes = [
    { path: "/center", msg: "制作主页好难偶" },
    { path: "/music", msg: "紅蓮華" },
    { path: "/news", msg: "股市暴跌" }
  ]

  //遍历所有按钮绑定事件
  const oBtns = document.querySelectorAll("#app button")
  const oView = document.getElementById("view");


  for (var i = 0; i < oBtns.length; i++) {
    oBtns[i].onclick = function () {
      // history.pushState方法改变浏览器的地址,不刷新页面
      history.pushState(null, null, this.dataset.url)
      //点击导航按钮后,修改地址
      // history.replaceState(null, null, this.dataset.url);
      routes.forEach(route => {
        if (route.path === this.dataset.url) {
          oView.textContent = route.msg;
        }
      })
    };
  }

  //给window绑定一个popstate事件,当通过历史记录改变浏览器的地址就会触发
  window.onpopstate = function (e) {
    //可以通过location.pathname拿到当前新的路径地址
    console.log("地址改变", location.pathname);
    //修改地址以后,直接改变视图
    routes.forEach((route) => {
      if (route.path === location.pathname) {
        oView.textContent = route.msg;
      }
    });

  };




</script>

</html>